$(function() {
	// async await 解决回调地狱
	async function init() {
		const typeRes = await $.http({
			url: "http://120.27.209.174:1010/api/v1/posts_type",
		})
		const types = {} // 构建类型的对象
		typeRes.forEach(function(item) {
			types[item.type] = item.text
		})

		// console.log(types)
		const res = await $.http({
			url: "http://120.27.209.174:1010/api/v1/posts",
		})
		res.data.forEach(function(item, index) {
			$(`<tr>
			  <th scope="row">${ item.id }</th>
			  <td>${ item.title }</td>
			  <td>${ types[item.type] }</td>
			  <td>${ item.author }</td>
			  <td>
				  <img src="${ item.poster }" alt="">
			  </td>
			  <td>${ item.view_count }</td>
			  <td>
				  <a href="./show.html?id=${ item.id }" type="button" class="btn btn-primary btn-sm">查看</a>
				  <a href="./edit.html?id=${ item.id }" type="button" class="btn btn-warning btn-sm">修改</a>
				  <button data-id="${ item.id }" type="button" class="btn btn-danger btn-sm">删除</button>
			  </td>
			</tr>`).appendTo(".my-table tbody")
		})

		
		/*
		Promise.all([
			$.http({
				url: "http://120.27.209.174:1010/api/v1/posts_type",
			}),
			$.http({
				url: "http://120.27.209.174:1010/api/v1/posts",
			})
		]).then(res => {
			const types = {} // 构建类型的对象
			res[0].forEach(function(item) {
				types[item.type] = item.text
			})
			// console.log(types)
			res[1].data.forEach(function(item, index) {
				$(`<tr>
				  <th scope="row">${ item.id }</th>
				  <td>${ item.title }</td>
				  <td>${ types[item.type] }</td>
				  <td>${ item.author }</td>
				  <td>
					  <img src="${ item.poster }" alt="">
				  </td>
				  <td>${ item.view_count }</td>
				  <td>
					  <a href="./show.html?id=${ item.id }" type="button" class="btn btn-primary btn-sm">查看</a>
					  <a href="./edit.html?id=${ item.id }" type="button" class="btn btn-warning btn-sm">修改</a>
					  <button data-id="${ item.id }" type="button" class="btn btn-danger btn-sm">删除</button>
				  </td>
				</tr>`).appendTo(".my-table tbody")
			})
		})
		
		$.http({
			url: "http://120.27.209.174:1010/api/v1/posts_type",
		}).then((res) => {
			const types = {} // 构建类型的对象
			res.forEach(function(item) {
				types[item.type] = item.text
			})
			console.log(types)
			$.http({
				url: "http://120.27.209.174:1010/api/v1/posts",
			}).then(res => {
				console.log(res)
				res.data.forEach(function(item, index) {
					$(`<tr>
					  <th scope="row">${ item.id }</th>
					  <td>${ item.title }</td>
					  <td>${ types[item.type] }</td>
					  <td>${ item.author }</td>
					  <td>
						  <img src="${ item.poster }" alt="">
					  </td>
					  <td>${ item.view_count }</td>
					  <td>
						  <a href="./show.html?id=${ item.id }" type="button" class="btn btn-primary btn-sm">查看</a>
						  <a href="./edit.html?id=${ item.id }" type="button" class="btn btn-warning btn-sm">修改</a>
						  <button data-id="${ item.id }" type="button" class="btn btn-danger btn-sm">删除</button>
					  </td>
					</tr>`).appendTo(".my-table tbody")
				})
			})
		})
		
		$.ajax({
			url: "http://120.27.209.174:1010/api/v1/posts_type",
			success(res) {
				// keji => "科技"
				// { keji: "科技", fe: "前端" }
				const types = {} // 构建类型的对象
				res.forEach(function(item) {
					types[item.type] = item.text
				})
				// console.log(types.fe)
			
				$.ajax({
					url: "http://120.27.209.174:1010/api/v1/posts",
					// url: "http://120.27.209.174:1010/api/v1/posts?page=第多少页",
					// url: "http://120.27.209.174:1010/api/v1/posts?page=第多少页&size=一页多少条数据",
					success(res) {
						// console.log(res.data)
						res.data.forEach(function(item, index) {
							$(`<tr>
							  <th scope="row">${ item.id }</th>
							  <td>${ item.title }</td>
							  <td>${ types[item.type] }</td>
							  <td>${ item.author }</td>
							  <td>
								  <img src="${ item.poster }" alt="">
							  </td>
							  <td>${ item.view_count }</td>
							  <td>
								  <a href="./show.html?id=${ item.id }" type="button" class="btn btn-primary btn-sm">查看</a>
								  <a href="./edit.html?id=${ item.id }" type="button" class="btn btn-warning btn-sm">修改</a>
								  <button data-id="${ item.id }" type="button" class="btn btn-danger btn-sm">删除</button>
							  </td>
							</tr>`).appendTo(".my-table tbody")
						})
					}
				})
			}
		})*/
	}
	
	init()
	
	// 显示模态框
	$(".my-table").on("click", ".btn-danger", function() {
		const id = $(this).data("id")
		console.log(id)
		$('#modal').modal('show')
		$('#modal .btn-danger').attr("data-id", id)
		// console.log($(this).attr("data-id"))
		// console.log($(this).parent().siblings().first().html())
	})
	// 删除
	$('#modal .btn-danger').on("click", function() {
		const id = $(this).data("id")
		console.log(id)
		$.ajax({
			method: "DELETE",
			url: `http://120.27.209.174:1010/api/v1/posts/${id}`,
			success(res) {
				$('#modal').modal('hide')
				$(".my-table tbody").empty()
				init()
			}
		})
	})
	
})


